// 定义变量保存验证码
let my_code = ''
Page({
  data: {
    countDownVisible: false,
    mobile: '',
    code: '',
    redirectUrl: ''
  },
  // 一进入页面 就打印
  onLoad(options) {
    console.log('登录页面的页面栈：', options);
    this.data.redirectUrl = options.redirectUrl
    // this.setData()
  },

  // 登录函数
  async submitForm() {
    // 验证手机号验证码,未通过则介绍登录流程
    if (!this.validateMobile() || !this.validateCode()) return
    // vue 得先做一步 api文件夹 封装 小程序比较小省略了封装这一步
    // 发送登录请求 并 获取登录参数
    const res = await wx.$http.post('/login', {
      mobile: this.data.mobile,
      code: this.data.code
    })
    // console.log('成功', res);
    if (res.code !== 10000) return wx.$utils.toast('登录请求失败')
    // 存储token-下面代码是登录成功以后做的事情，将token保存起来
    // const token = 'Bearer' + res.data.token
    // const refreshToken = 'Bearer' + res.data.refreshToken
    // getApp().token = token
    // getApp().refreshToken = refreshToken
    // // 下面是同步写法，一般不用，因为同步的代码会有阻塞流程的影响，所以一般api尽量选择异步的
    // // wx.setStorageSync('token', token)
    // wx.setStorage({
    //   key: 'token',
    //   data: token
    // })
    // wx.setStorage({
    //   key: 'refreshToken',
    //   data: refreshToken
    // })
    getApp().setToken(res.data.token, res.data.refreshToken)


    // 登录成功以后，先保存了token，然后再跳转回之前的页面
    // bug: 在登录成功以后，跳转的连接redirectUrl， 有可能有值，有可能为空
    // redirectUrl为空的时候，跳转不会生效，控制台也不会报错
    // wx.redirectTo({
    //   url: this.data.redirectUrl,
    // })
    // if (this.data.redirectUrl) {
    //   wx.redirectTo({
    //     url: this.data.redirectUrl,
    //   })
    // } else {
    //   wx.redirectTo({
    //     url: '/page/index/index',
    //   })
    // }

    // 三元表达式   xxx ? xxx : xxxx
    // this.data.redirectUrl ? 
    // wx.redirectTo({
    //   url: this.data.redirectUrl,
    // }) : wx.redirectTo({
    //   url: '/page/index/index',
    // })

    // 逻辑中断  逻辑与 和 逻辑或
    // 重定向回访问页, 如没有则回首页
    wx.redirectTo({
      url: this.data.redirectUrl || '/pages/index/index',
    })
  },

  // getCode这个函数的功能就是单独的发请求的， 我们的手机号校验的功能
  // 比较大，应该单独抽离封装成一个函数，去下面函数调用一下就可以了
  async getCode() {
    // 发起获取验证码的请求 ---- 先校验
    // 校验未通过，直接结束函数流程
    if (!this.validateMobile()) return
    // 下面写法和上面一样， 上面是if 的简写形式， return是退出函数的作用
    // if (!this.validateMobile()) {
    //   return
    // }

    // wx.$http.xxxx
    // console.log(111);

    // 发送请求，获取验证码
    const res = await wx.$http.get('/code', {
      mobile: this.data.mobile.trim()
    })
    // 请求失败，结束函数流程并给出提示
    if (res.code !== 10000) return wx.$utils.toast("获取验证码请求失败")
    // 请求成功提示
    wx.$utils.toast('发送成功，请查收短信')
    // 开始倒计时
    this.setData({
      // 设置为true 在wxml里 wx:if="{{!countDownVisible}}"
      countDownVisible: true
    })

    // 赋值给全局变量 下面会用
    my_code = res.data.code

    // if(this.validateMobile()) {
    //   console.log(111);
    // } else {
    //   xxxx
    // }
  },

  // 复制验证码到剪切板
  copyCode() {
    // 向剪贴板 放置内容。 类似与我们平常的 ctrl+c 将内容放到剪切板里面
    wx.setClipboardData({
      data: my_code,
    })
  },

  // 校验手机号
  validateMobile() {
    // 宽松验证规则
    const reg = /^1[3|5|6|7|8|9]\d{9}$/
    // 正则验证
    const valide = reg.test(this.data.mobile.trim())
    // console.log(valide);

    // 验证未通过
    if (!valide) wx.$utils.toast('手机号校验失败')
    // 返回验证结果
    return valide
  },

  // 校验验证码
  validateCode() {
    // aaaaAAAAA11111!@#￥%……&*
    // 正则验证是否为六个数字
    const reg = /^\d{6}$/
    const valide = reg.test(this.data.code.trim())
    // 验证未通过
    if (!valide) wx.$utils.toast('验证码校验失败,请检查验证码是否正确')
    // 返回验证结果
    return valide
  },

  countDownChange(ev) {
    this.setData({
      timeData: ev.detail,
      countDownVisible: ev.detail.minutes === 1 || ev.detail.seconds > 0,
    })
  },
})
